<template>
  <div>
	 <div id="memberCard">
	  <img class="memberCard_image" src="./assets/WechatIMG1051.jpeg"  style="visibility: hidden;">
	  <div class="memberCard_mess">
		  <span class="memberCard_mess_text">姓 &nbsp;&nbsp;名：</span>
		  <input class="memberCard_mess_input" :value="realName" disabled/>
	  </div>
	  <div class="memberCard_mess">
		  <span class="memberCard_mess_text">手机号：</span>
		  <input class="memberCard_mess_input" :value="phoneNumber" disabled/>
	  </div>
	  <div class="memberCard_rank">
		<span class="memberCard_rank_text"> <span>&lt; </span> <span>{{agencyLevel || '一星'}} </span> <span>&gt;</span>  </span>
	  </div>
	  <div class="memberCard_content">
		<span class="memberCard_content_text"><!--
		-->授权期间享受我们公司的品牌权益，同时必须遵守我公司各项制度。<!--
		-->本授权不得转让，涂改。未经本公司授权的代理商所售产品均视为冒牌产品，<!--
		-->由此产生的产品质量售后问题以及其他一切法律责任自行承担，且公司保留索赔的<!--
		-->权利。九合科技产品五重防伪，严禁仿冒。本品禁止在网上平台销售。<!--
		-->在网上平台购买的产品所产生的一切不确定因素，均与本公司无关。
		</span>
		  <div class="flex">
			  <div style="margin-right: 10px;" class="flex_item">
				  <span>授权期限：{{term}}</span>
				  <span>加盟时间：{{joinTime}}</span>
				  <span>合同号：{{accountId}}</span>
				  <span>授权方：深圳市九合生物科技有限公司</span>
			  </div>
			  <div>
				  <img class="memberCard_image" src="./assets/WechatIMG1051.jpeg" style="margin-bottom:0px;">
			  </div>
		  </div>

	  </div>
  </div>
  </div>
</template>
<script>
import '../../css/layout.css'
import User from '_common/services/user.js'
import '@/utils/rem.js';
import { getCookie } from '@/utils/cookiesUtil.js'
import {getQuery} from '@/utils/utils'
import { wechatShare} from '_common/services/order'
import wechat from 'weixin-js-sdk'
const agency = ['一星', '二星', '三星', '九星'];

export default {
  	name: 'memberCard',
  	data() {
  		return {
			  realName: '李同乐',
			  phoneNumber: '1222222',
			  accountId: 'JH2018121001', // 合同号
			  agencyLevel: '一星',
			  realName: '张凯',
			  joinTime: '2018年12月01日',
			  term: '2018年12月至2019年12月',
  		}
  	},
  	computed: {
  	},
  	methods: {
		goRegisterNew() {
			this.$openRouter({
				name: 'register',
				query: {
					shareCode: getQuery('shareCode'),
				},
            })
		},
		goHome() {
			this.$openRouter({
				name: 'home',
            })
		}
    },
	created () {
	}, 
    mounted(){
		User.getUserInfo1(getQuery('userId')).then(res => {
			console.log('res,', res);
			if(res.code === 0) {
				if (res.data) {
                    const { accountId, phoneNumber, agencyLevel, joinTime, realName } = res.data;
                    const time = joinTime.split(' ')[0].split('-');
                    this.phoneNumber = phoneNumber;
                    this.accountId = accountId;
                    this.agencyLevel = agencyLevel * 1 === 9 ? '九星' : agency[agencyLevel - 1];
                    this.joinTime = `${time[0]}年${time[1]}月${time[2]}日`;
                    this.realName = realName;
					this.term = `${time[0]}年${time[1]}月至${time[0] * 1 + 1}年${time[1]}月`;
					wechatShare('会员名片');
				}
			}
			else {
			    this.$alertTip(res.msg || '获取信息失败！')
			}
		})
    },
    components: {
    }
}  
</script>

<style lang="less" scoped>
html {
	height: 100%;
	body {
		height: 100%;
		padding: 20px;
	}
}
#memberCard {
	padding: 118px 92px;
	background-image: url('./assets/bg_ac.jpg');
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.memberCard_image {
		height: 100px;
		width: 100px;
		align-self: flex-end;
		margin-bottom: 400px;
	}
	.flex {
		display:flex;
		justify-content: space-between;
		align-items: center;
		.flex_item {
			display:flex;
			flex-direction: column;
		}
	}
	.memberCard_mess {
		font-size: 28px;
		margin-bottom: 30px;
		.memberCard_mess_text {
			display: inline-block;
			width: 120px;
			text-align: center;
		}
		.memberCard_mess_input {
			font-size: 28px;
			color: black;
			width: 250px;
			outline: none;  
			border: 0px;
			border-bottom: 1px solid black;
			background-color: transparent ;
		}
	}
	.memberCard_rank {
		font-size: 36px;
		font-weight: 500;
		margin-bottom: 30px;
		font-size: 36px;
		.memberCard_rank_text {
			display: flex;
			width: 300px;
			justify-content: space-between;
		}
	}
	.memberCard_content {
		font-size: 18px;
		font-weight: bolder;
		display: flex;
		flex-direction: column;
	    padding: 10px;
		.memberCard_content_text {
			font-weight: 350;
			margin-bottom: 40px;
		}
	}
}
.memberCard_header {
	height: 88px;
	background-color: white;
	color: #f3a13a;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 32px;
	position: relative;
	.memberCard_header_item {
		font-size: 32px;
	}
	.memberCard_header_shop {
		position: absolute;
		top: 50%;
		left: 32px;
		transform: translateY(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		.memberCard_header_img{
			margin-right: 15px;
			width: 17px;
			height: 29px;
		}
	}
	.memberCard_header_item1 {
		position: absolute;
		top: 50%;
		right: 32px;
		transform: translateY(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		.memberCard_header_img{
			margin-left: 15px;
			width: 17px;
			height: 29px;
		}
	}

}


</style>